<template>
  <div class="chat-list">
    <template v-for="item in mockList">
      <div
        :class="['chat-list-item', currentItemId === item.id ? 'chat-item-selected' : '']"
        @click="clickItem(item)"
        @contextmenu.prevent="handleShowContextMenu($event, item)"
      >
        <!--    头像  -->
        <div class="chat-list-item-avatar">
          <n-badge :value="item.noReadCount" :max="99" v-if="item.noReadCount > 0">
            <img :src="item.avatar" width="38" alt="头像">
          </n-badge>
          <img :src="item.avatar" width="38" v-else alt="头像">
        </div>

        <!--    右侧缩略显示信息  -->
        <div class="chat-list-item-detail">
          <div class="dis-flex sbw alc">
            <div class="chat-list-item-name">{{ item.name }}</div>
            <div class="time-info">14:26</div>
          </div>
          <div class="short-info show-one-line">
            <span style="margin-right: 2px;color: red;" v-if="item.status === 1">[{{ item.statusText }}]</span>
            {{ item.shortInfo }}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";
const emits = defineEmits(['clickItem'])

import { mockList } from "@/views/chat/chatList/mockList.js";

import { showContextMenu } from "@/utils/eventBus/contextMenu.js";

const currentItemId = ref(); // 当前选中的item
const clickItem = (item) => {
  currentItemId.value = item.id;
  emits('clickItem', item)
}

// 显示右键菜单
const handleShowContextMenu = (e, item) => {
  showContextMenu(e, item)
};

</script>

<style lang="scss" scoped>
$txtColor: #999999;
.chat-list-item {
  padding: 10px;
  display: flex;
  flex-direction: row;
  background-color: #f7f7f7;

  &:hover {
    background-color: #D4D4D4;
  }

  .chat-list-item-avatar {
    position: relative;
  }
  .chat-list-item-detail {
    padding-left: 6px;
    width: calc(100% - 36px);
    .chat-list-item-name {
      font-size: 14px;
      font-weight: 500;
    }
  }
  .short-info {
    font-size: 12px;
    color: $txtColor;
    padding-top: 2px;
    //width: calc(100% - 80px);
    width: 100%;
  }
  .time-info {
    color: $txtColor;
    font-size: 12px;
  }
}

.chat-item-selected {
  background-color: #C4C4C4 !important;
}

//:deep(.el-badge__content) {
//  border: 0;
//  padding: 0 4px;
//  height: 14px;
//  line-height: 14px;
//}
</style>
